﻿<template>
  <base-dialog destroy-on-close show-footer title="采购SN导入" :width="500" v-model="modalShow" @close="hide">
    <el-form ref="uploadFormRef" :model="uploadForm" label-width="auto">
      <el-form-item label="上传文件" prop="name">
        <el-text type="primary" v-if="currentFile">{{ currentFile.name }}</el-text>
        <el-upload
          ref="uploadRef"
          action="#"
          :limit="2"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleBeforeUpload"
          accept=".xls,.xlsx"
        >
          <el-button type="primary" class="upload-btn">
            <base-icon name="iconfont ic-yunshangchuan" :size="16" />
            <span class="upload-btn-text">选择文件</span>
          </el-button>
        </el-upload>
      </el-form-item>
      <!-- <el-button type="primary" link @click="downLoadFile">下载SN编码模版</el-button> -->
    </el-form>

    <div>
      说明:文件需在10M以内，表内数据不能超过1000条，因调第三方查询SN激活状态接口有调用限制(1分钟只能只能查10次)，文件上传后需等待一段时间才能查看到SN激活状态(1000条为例大概需要1小时40分钟查完)。
    </div>
    <template #footer>
      <el-button @click="hide">取消</el-button>
      <el-button type="primary" @click="uploadConfirm">确认选择</el-button>
    </template>
  </base-dialog>
</template>

<script setup>
  const props = defineProps({
    visble: { type: Boolean, default: false },
  });
  const emit = defineEmits(["hide", "confirm"]);
  // 监听显隐
  watch(
    () => props.visble,
    v => {
      modalShow.value = v;
    }
  );
  // 显示、隐藏
  const modalShow = ref(false);
  // 表单Ref
  const uploadFormRef = ref();
  // 表单
  const uploadForm = reactive({ fileUrl: "" });
  // 当前文件
  const currentFile = ref("");
  // 文件上传
  const handleUpload = file => {
    const formData = new FormData();
    formData.append("file", file);
    Api.product.uploadSNFile(formData).then(res => {
      $msg.success("导入成功");
      hide(true);
      // nextTick(() => {
      //   uploadFormRef.value.clearFiles();

      // });
    });
  };
  // 上传前处理
  const handleBeforeUpload = rawFile => {
    console.warn(rawFile);

    if (
      !["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"].includes(
        rawFile.raw.type
      )
    ) {
      $msg.error("请上传.xls、.xlsx格式图片");
      nextTick(() => {
        uploadFormRef.value.clearFiles();
      });
      return false;
    } else if (rawFile.raw.size / 1024 / 1024 > 10) {
      $msg.error("上传图片最大不超过10MB!");
      nextTick(() => {
        uploadFormRef.value.clearFiles();
      });
      return false;
    }
    currentFile.value = rawFile.raw;
    // handleUpload(rawFile.raw);
    return true;
  };
  // 下载SN编码模版
  const downLoadFile = () => {
    Api.product.downloadFile({ filename: "SN.xlsx" }).then(res => {
      console.warn(res, "9999999999");
      let url = window.URL.createObjectURL(res);
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", "ces" + ".xls");

      document.body.appendChild(link);
    });
  };
  // 关闭
  const hide = refresh => {
    currentFile.value = "";
    emit("hide", refresh);
  };
  // 确认
  const uploadConfirm = () => {
    if (!currentFile.value) {
      $msg.warning("请上传文件");
      return;
    }
    handleUpload(currentFile.value);
  };
</script>

<style lang="scss" scoped>
  .upload-btn {
    font-size: 12px;
    margin-left: 10px;
    .upload-btn-text {
      margin-left: 10px;
    }
  }
</style>
